<!-- 销售订单详情页面 -->
<template>
  <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
  </pageHeader>
  <div class="demand-index">
    <a-form
      auto-label-width
      ref="form"
      :model="demand.info"
      autoLabelWidth
      layout="horizontal"
    >
      <a-row :gutter="16">
        <a-col
          v-for="element in demandForm.info.design.form"
          :key="element.id"
          :span="element.span"
        >
          <FormItem
            :name="element.name"
            :componentType="element.componentType"
            v-model:props="element.props"
            :required="element.required"
            v-model:values="element.values"
          />
        </a-col>
      </a-row>
    </a-form>
    <div v-if="route.query.key" class="confirm-button">
      <div>
        <a-space>
          <a-button type="outline" @click="router.back()">取消</a-button
          ><a-button type="primary" @click="confirm()">确认</a-button>
        </a-space>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import * as apiList from '@/api/order-management/client-order/index';
  import { useRouter, useRoute } from 'vue-router';

  let checkGroupValue = ['1'];
  const route = useRoute();
  const router = useRouter();
  const breadCrumb: string[] = ['订单管理', '客户订单', '销售订单详情页'];
  const title: string = '销售订单详情页';
  const layout = ref('vertical');
  type Tlayout = 'inline' | 'horizontal' | 'vertical' | undefined;
  const fakeValue = ref(['']);
  // interface DemandType {
  //   info: {
  //     id: number;
  //     clientCompanyId: number;
  //     clientName: string;
  //     userStaffName: string;
  //     userStaffId: number;
  //     extend: any;
  //     orderTime: string;
  //     product: any;
  //     delivery: any;
  //     orderTemplateId: number;
  //     status: number
  //   };
  // }

  const demand = reactive<any>({
    info: {
      id: 0,
      clientCompanyId: 0,
      clientName: '',
      userStaffName: '',
      userStaffId: 0,
      extend: '',
      orderTime: '',
      product: [],
      delivery: [],
      orderTemplateId: 0,
      status: 0,
    },
  });
  interface DemandFormType {
    info: {
      design: {
        form: any[];
      };
    };
  }
  const demandForm = reactive<DemandFormType>({
    info: { design: { form: [] } },
  });
  const getDemandInfo = async (id: number) => {
    let res = await apiList.GetClientOrderDetail({ id });
    console.log(res);
    demand.info = res;
    demandForm.info.design.form = JSON.parse(res.extend);
    demandForm.info.design.form.sort((a: any, b: any) => a.sort - b.sort);
    demandForm.info.design.form.forEach((item: any) => {
      if (item.componentType === 'FILE') {
        item.props.data = res.file[0];
      }
      // item.props = JSON.parse(item.props);
      // item.values = JSON.parse(item.values);
      // if()
    });
  };
  const formTemplate = ref([]);
  onMounted(() => {
    // 如果是添加则获取状态开启的那个模板
    // getByTemplateStatusOn()
    // 如果是编辑则获取对应的模板
    let Id = Number(router.currentRoute.value.query.id);
    demand.info.id = Id;
    getDemandInfo(Id);
  });

  const confirm = async () => {
    demand.info.state = 2;
    delete demand.info.extends;
    await apiList.putClientOrder(demand.info);
    router.back();
  };
</script>

<style scoped lang="less">
  .demand-index {
    padding: 16px;
    width: 95%;
    margin: 0 auto;

    :deep(.arco-input[disabled]),
    :deep(.arco-textarea[disabled]) {
      -webkit-text-fill-color: #165dff;
    }
  }

  .success {
    position: absolute;
    right: 30px;
    background-color: #31c27c;
    color: #fff;
    border-radius: 100%;
    width: 50px;
    text-align: center;
  }

  .blacklist {
    position: absolute;
    right: 30px;
    background-color: red;
    color: #fff;
    margin-left: 20px;
    border-radius: 100%;
    width: 50px;
    text-align: center;
  }

  .confirm-button {
    display: flex;
    flex-direction: row-reverse;
    // justify-content: space-between;
  }
</style>
